<template>
  <div class="activity">
    <el-button class="back-btn" type="primary" @click="back">返回拼团列表</el-button>
    <el-table v-loading="loading" :data="tableData" style="width: 100%" border>
        <el-table-column prop="usersNum" label="实际参团人数" align="center"  width="120px"></el-table-column>
        <el-table-column prop="rewardType" label="奖励类型" align="center">
          <template slot-scope="scope">
            {{rewardTypeText[scope.row.rewardType]}}
          </template>
        </el-table-column>
        <el-table-column prop="expectPrice" label="预计红包奖励" align="center"></el-table-column>
        <el-table-column prop="rpTotalPrice" label="实际红包奖励" align="center"></el-table-column>
        <el-table-column label="拼团状态" align="center">
          <template slot-scope="scope">
            <div>{{statusText[scope.row.status]}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="openTime" label="开团时间" align="center"></el-table-column>
        <el-table-column label="成团起止时间" align="center" width="320px">
          <template slot-scope="scope">
            {{scope.row.cloudsStartTime}} 至 {{scope.row.cloudsEndTime}}
          </template>
        </el-table-column>
        
        <el-table-column label="操作" align="center" width="150px" fixed="right">
          <template slot-scope="scope">
              <el-button type="text" size="mini" @click="viewChild(scope.row)">查看参团用户</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination :page-size="searchData.size" :current-page="searchData.page" layout="prev, pager, next,total,jumper"
        :total="total" background @current-change="handleCurrentChange">
        </el-pagination>
      </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      loading: false,
      tableData: [],
      total: 0,
      searchData: {
        page: 1,
        size: 10
      },
      statusText: {
        0: '待成团',
        1: '待开团',
        2: '已开团'
      },
      rewardTypeText: {
        1: '支付宝红包',
        2: '微信零钱',
        3: '糖果积分'
      }
    }
  },
  mounted () {
    this.searchData.sgId = this.$route.query.id;
    this.getData()
  },
  methods: {
    back() {
      this.$router.go(-1)
    },
    viewChild(row) {
      this.$router.push({
          path: 'spellGroupUser',
          query: {
            id: row.subSgId
          }
        })
    },
    getData() {
      this.loading = true;
      this.$http.get(this.$api.spellGroupSubList, this.searchData).then(res => {
          this.tableData = res.data;
          this.total = res.extraInfo;
          this.loading = false;
      })
    },
    handleCurrentChange(val) {
        this.searchData.page = val;
        this.getData();
    },
  }
}
</script>
<style scoped>
	.activity {
		padding: 15px;
	}

	.pages {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 30px;
	}
  .back-btn {
    margin-bottom: 15px;
  }
</style>